<!-- @format -->

<template>
  <view class="switch-example">
    <text class="example-title">开关组件示例</text>

    <!-- 基础用法 -->
    <view class="example-section">
      <text class="section-title">基础用法</text>
      <comp-switch v-model="checked1"></comp-switch>
      <view class="example-value">当前值: {{ checked1 }}</view>
    </view>

    <!-- 禁用状态 -->
    <view class="example-section">
      <text class="section-title">禁用状态</text>
      <comp-switch v-model="checked2" disabled></comp-switch>
      <comp-switch v-model="checked3" disabled></comp-switch>
    </view>

    <!-- 加载状态 -->
    <view class="example-section">
      <text class="section-title">加载状态</text>
      <comp-switch v-model="loadingChecked" loading></comp-switch>
    </view>

    <!-- 自定义颜色 -->
    <view class="example-section">
      <text class="section-title">自定义颜色</text>
      <comp-switch
        v-model="colorChecked1"
        active-color="#07c160"
        inactive-color="#ee0a24"
      ></comp-switch>
    </view>

    <!-- 带标签 -->
    <view class="example-section">
      <text class="section-title">带标签</text>
      <comp-switch v-model="labelChecked" label="开关标签"></comp-switch>
    </view>

    <!-- 开关尺寸 -->
    <view class="example-section">
      <text class="section-title">开关尺寸</text>
      <view class="switch-row">
        <comp-switch v-model="sizeChecked" size="small"></comp-switch>
        <comp-switch v-model="sizeChecked" size="medium"></comp-switch>
        <comp-switch v-model="sizeChecked" size="large"></comp-switch>
      </view>
    </view>

    <!-- 自定义值 -->
    <view class="example-section">
      <text class="section-title">自定义值</text>
      <comp-switch
        v-model="customValue"
        :active-value="'on'"
        :inactive-value="'off'"
      ></comp-switch>
      <view class="example-value">当前值: {{ customValue }}</view>
    </view>

    <!-- 方法调用 -->
    <view class="example-section">
      <text class="section-title">方法调用</text>
      <comp-switch v-model="methodChecked" ref="switchRef"></comp-switch>
      <view class="button-row">
        <button class="action-button" @click="setChecked(true)">
          设为开启
        </button>
        <button class="action-button" @click="setChecked(false)">
          设为关闭
        </button>
        <button class="action-button" @click="toggleChecked">切换状态</button>
      </view>
      <view class="example-value">当前值: {{ methodChecked }}</view>
    </view>

    <!-- 事件监听 -->
    <view class="example-section">
      <text class="section-title">事件监听</text>
      <comp-switch
        v-model="eventChecked"
        @change="onChange"
        @click="onClick"
      ></comp-switch>
      <view class="event-log">
        <view v-for="(log, index) in eventLogs" :key="index" class="log-item">
          {{ log }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import CompSwitch from './Index.vue';
  import { SwitchMethods } from './types';

  // 基础用法
  const checked1 = ref(true);

  // 禁用状态
  const checked2 = ref(false);
  const checked3 = ref(true);

  // 加载状态
  const loadingChecked = ref(true);

  // 自定义颜色
  const colorChecked1 = ref(true);

  // 带标签
  const labelChecked = ref(true);

  // 开关尺寸
  const sizeChecked = ref(true);

  // 自定义值
  const customValue = ref('on');

  // 方法调用
  const methodChecked = ref(false);
  const switchRef = ref<InstanceType<typeof CompSwitch> | null>(null);

  // 设置选中状态
  const setChecked = (checked: boolean) => {
    switchRef.value?.setChecked(checked);
  };

  // 切换选中状态
  const toggleChecked = () => {
    switchRef.value?.toggle();
  };

  // 事件监听
  const eventChecked = ref(false);
  const eventLogs = ref<string[]>([]);

  // 变更事件
  const onChange: any = (value: any) => {
    addEventLog(`change事件触发，值: ${value}`);
  };

  // 点击事件
  const onClick = () => {
    addEventLog('click事件触发');
  };

  // 添加事件日志
  const addEventLog = (log: string) => {
    const timeLog = `${log}, 时间: ${new Date().toLocaleTimeString()}`;
    eventLogs.value.unshift(timeLog);
    if (eventLogs.value.length > 5) {
      eventLogs.value.pop();
    }
  };
</script>

<style lang="scss" scoped>
  .switch-example {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;

    .example-title {
      font-size: 24px;
      margin-bottom: 20px;
      color: #333;
      display: block;
    }

    .example-section {
      margin-bottom: 30px;

      .section-title {
        font-size: 18px;
        margin-bottom: 10px;
        color: #666;
        display: block;
      }

      .example-value {
        margin-top: 8px;
        color: #666;
        font-size: 14px;
      }

      .switch-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 10px;
      }
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }

    .action-button {
      padding: 8px 16px;
      background-color: #1989fa;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 14px;
    }

    .event-log {
      margin-top: 10px;
      padding: 10px;
      background-color: #f8f8f8;
      border-radius: 4px;
      max-height: 150px;
      overflow-y: auto;

      .log-item {
        padding: 5px 0;
        border-bottom: 1px solid #eee;
        font-size: 12px;
        color: #666;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
</style>
